<template>
  <div class="chart-content">
    <div ref="chartRef" v-show="isShowChart" style="width: 100%; height: 350px"></div>
    <div v-show="!isShowChart" class="no-data">暂无数据</div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {getSubmissionsOption } from '../js/echartOption'
export default {
  props:{
    reportData: {
      type: Object,
      default: () => {},
    },
    buName:{
      type: String,
      default: "华润集团",
    },
    initFinish:{
      type:Boolean,
      default:false
    }
  },
  data () {
    return {
      isShowChart: false,
      chatData:{},
      echartsInstance:null,
      chartRef:""
    }
  },
  
  methods: {
    initChart() {
      const chatData = [
        {
          name:"未上报标段的预算占比",
          value:this.chatData?.unReportTotalFundScale
        },
        {
          name:"已上报标段的预算占比",
          value:this.chatData?.reportedTotalFundScale
        }
      ]
      const total = this.chatData.totalFundScale;
      if(this.echartsInstance){
        this.echartsInstance.dispose();
      }
      this.echartsInstance = echarts.init(this.$refs.chartRef, 'default');
      const option = getSubmissionsOption(chatData,total,this.buName);
      option && this.echartsInstance.setOption(option,true);
      window.addEventListener('resize',() =>{
        this.echartsInstance && this.echartsInstance.resize();
      })
    }
  },

  watch:{
    reportData:{
      handler(newVal) {
        if(newVal?.reportedTotalFundScale || newVal?.unReportTotalFundScale){
          this.chatData = newVal;
		  this.$nextTick(() => {
		    this.initChart()
		  })
		  this.isShowChart = true;
        }
        else{
          this.chatData = {};
        }
      },
      deep: true,
      immediate: true
    },

    initFinish(newVal) {
      if(newVal){
        if(this.chatData?.reportedTotalFundScale || this.chatData?.unReportTotalFundScale){
          this.$nextTick(() => {
            this.initChart()
          })
          this.isShowChart = true;
        }
        else{
          this.chatData = {};
          this.isShowChart = false;
        }
      }
    }
  },
  activated() {
    this.$nextTick(() => {
      if(this.echartsInstance){
        this.echartsInstance.resize();
      }
    });
  },
  beforeDestroy(){
    if(this.echartsInstance){
      this.echartsInstance.dispose();
    }
  }
}
</script>



<style lang="less" scoped>
.chart-content {
  width: 45%;
  height: 100%;
  .no-data{
    width: 100%;
    height: 100%;
    line-height: 300px;
    text-align: center;
    color: #333;
    font-size: 14px;
  }
}
</style>
